<template>
  <div class="big_box">
    <div class="type">
      <div class="icon">
        <div v-if="themeMessage.is_top == 1">
          <img src="../../assets/images/zhiding1.png">
        </div>

      </div>
    </div>
    <div class="usermessage" @click="to_userCenter">
      <div class="head_img">
        <img src="../../assets/images/OIP-C.jpg" >
      </div>
      <div class="name_time">
        <div class="name">{{userMessage.user_name}}</div>
        <div class="time">{{themeMessage.theme_post_createTime}}</div>
      </div>
      <div class="Jicon">
                <div v-if="themeMessage.is_fine == 1">
          <img src="../../assets/images/jinghua2.png">
        </div>
      </div>
    </div>
    <div class="contain" @click="topost">
      <div class="title">
       标题： {{themeMessage.theme_post_title}}
      </div>
      <hr style="background-color: #e4dddd">
      <div class="contain_detail">
        <p v-html="themeMessage.theme_post_content"></p>
      </div>

    </div>
    <div class="_bottom">
      <div class="_delete" v-if="user.user_id == userMessage.user_id || user.is_manager == 1">
        <span class=" icon el-icon-delete"></span>
        <el-button size="medium" round style="margin:10px" @click="delete_theme">删帖</el-button>
      </div>
      <div :class="{'collect':true ,'el-icon-star-off':is_collection == 0, 'el-icon-star-on':is_collection ==1, 'active_collect':is_collection==1 }" @click="collection">
        <span class="icon  ">收藏</span>
      </div>
      <div class="reply " @click="topost">
        <span class="icon el-icon-edit"></span>
       回帖
      </div>
    </div>
  </div>
</template>

<script>
import {deleteTheme} from "../../api"
import {collectTheme} from "../../api"
import {lockTheme} from "../../api"

export default {
  props: {
    themeMessage:{
      type:Object,
      required:true
    },
    userMessage:{
      type:Object,
      required:true
    }
  },
  data () {
    return {
      user:{},
      temp:0,
      is_collection:0,
    }
  },
  inject:['reload'],
  created () {
    // console.log(this.props.themeMessage);
    this.user = JSON.parse(window.localStorage.getItem('user'))
    this.temp = this.$options.propsData.themeMessage.theme_post_id
    let collect = this.user.theme_collect_list.split(",")
    for(let i in collect){
      if(parseInt(i) == this.temp){
        this.is_collection = 1
        break;
      }
    }
  },
  methods: {
    delete_theme(){
      let temp = this.temp
      if(this.user.is_manager == 1){
        lockTheme(temp)
        .then(res => {
          alert(res.data.message)
        })
        .catch(() => {});
      }else{
        deleteTheme(temp)
        .then(res => {
          alert(res.data.message)
        })
        .catch(() => {});
      }
       this.reload()
    },
    to_userCenter(){
      let temp = this.$options.propsData.userMessage.user_id
      this.$router.push({
        path: `/userHome/${temp}`,
      })
    },
    topost(){
      let temp = this.temp
      this.$router.push({
        path: `/post/${temp}`,
      })
      
    },
    collection(){
      let temp = this.temp
      let user_id = this.user.user_id
      console.log(user_id ,"   ------", temp);
     
      collectTheme(user_id,temp )
        .then(res => {
          console.log(res);
          alert(res.data.message)
        })
        .catch(() => {});
      this.is_collection = 1
    }

  }
}
</script>

<style lang="less" scoped>
  .big_box{
    .active_collect{
      color:red
    }
    margin-top:30px ;
    background-color: #f5f3f3;
    .type{
      background-color: rgb(109, 177, 233);
      width: 100%;
      .icon{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        // background-color: #000;
        margin-right:95%;
        color:#000;
      }
    }
    .usermessage{
      display: flex;
      flex-direction: row;
      margin:10px;
      justify-content: start;
      .head_img{
        width: 10%;
        height: 60px;
        border-radius: 50%;
        // background-color: #000;
        margin:10px;
        margin-right: 20px;
        img{
          width: 80px;
          height: 80px;
           border-radius: 50%;
        }
      }
      .name_time{
        display: flex;
        flex-direction: column;
         margin:10px;
         font-weight: 800;
         line-height: 40px;
      }
      .Jicon{
        width: 10%;
        height: 60px;
        border-radius: 50%;
        // background-color: #000;
        margin:10px;
        margin-left: 50%;
        img{
          width: 60px;
          height: 60px;
           border-radius: 50%;
        }
      }
    }
    .contain{
      background-color: #fff;
      margin: 10px;
      padding: 10px;
      box-shadow:5px 5px 10px 5px #ccc;

      .title{
        margin: 10px;
        text-align: left;

        // background-color: #e4dddd;
      }
      .contain_detail{
        text-align: left;
         margin: 10px;
        // background-color: #e4dddd;
      }
    }
    ._bottom{
       display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 20px;
      div{
        line-height: 80px;
        span{
          width: 50px
        }
      }
     
    }
  }
</style>